<template>
  <div class="Pointer" @scroll="loading">
    <Art-show :Artlist="pointerList"></Art-show>
    <Loading v-if="this.$store.state.isLoading"></Loading>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
import ArtShow from "@/components/ArtShow.vue";
export default {
  name: "PointerView",

  data() {
    return {
      pointerList: [],
      page: 1,
    };
  },
  components: { ArtShow, Loading },
  created() {
    this.$store.commit("setLoading", true);
    this.$http({
      methods: "get",
      url: "/lqb/api/works",
      params: {
        type: 3,
        page: this.page,
      },
    }).then(({ data: { data } }) => {
      // console.log(data);
      this.pointerList = data;
      this.$store.commit("setLoading", false);
    });
  },
  mounted() {},

  methods: {
    async loading(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.$store.commit("setLoading", true);
        this.page++;
        const {
          data: { data },
        } = await this.$http({
          methods: "get",
          url: "/lqb/api/works",
          params: {
            type: 3,
            page: this.page,
          },
        });
        this.pointerList = [...this.pointerList, ...data];
        this.$store.commit("setLoading", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Pointer {
  height: 73vh;
  overflow-y: scroll;
}
</style>
